<template>
  <div class="box">
    <!-- 头部搜索模块 -->
    <headerSearch :selectObj="selectObject" :isShowAdd="menuFlag" :goSearchFc="searchClick" :addFun="add" />
    <!-- 中间表格模块 -->
    <BaseTable :data="cargotableData" @detailsdb="doubleClick" :columns="cargotableDataColumns"
      :tableHeight="tableHeight" :pagination="false" :loading="loading"></BaseTable>

    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="startpage" :page-sizes="[10, 15, 20, 25, 30]" :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
    </div>
    <div class="leftbox">
      <el-drawer :before-close="handleClose" :title="flag ? '新增船舶信息' : '编辑船舶信息'" :visible.sync="drawer" direction="rtl"
        size="55%">
        <el-form :rules="basisRules" ref="formRefs" size="small" :model="form" style="padding:20px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文船名" prop="shipName" :label-width="formLabelWidth">
                <el-input @input="form.shipName = verifyfilter('charSpace', form.shipName)" v-model="form.shipName"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文船名" prop="shipNameEn" :label-width="formLabelWidth">
                <el-input @input="form.shipNameEn = verifyfilter('latinSpace', form.shipNameEn)"
                  v-model="form.shipNameEn" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="船籍" prop="nationCode" :label-width="formLabelWidth"
                :rules="[{ required: true, message: '船籍不能为空' }]">
                <el-select clearable filterable style="width: 100%;" v-model="form.nationCode" placeholder="请选择"
                  @change="nationNameFun">
                  <el-option v-for="item in nationData" :key="item.dictValue" :label="item.dictLabel"
                    :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="船舶类型" prop="shipTypeCode" :label-width="formLabelWidth"
                :rules="[{ required: true, message: '船舶类型不能为空' }]">
                <el-select clearable v-model="form.shipTypeCode" placeholder="船舶类型" style="width: 100%"
                  @change="changeDead">
                  <el-option v-for="item in boatData" :key="item.dictValue" :label="item.dictLabel"
                    :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="IMO" prop="imo" :label-width="formLabelWidth">
                <el-input @input="form.imo = verifyfilter('char', form.imo)" v-model="form.imo" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="MMSI" prop="mmsi" :label-width="formLabelWidth">
                <el-input @input="form.mmsi = verifyfilter('char', form.mmsi)" v-model="form.mmsi"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="呼号" prop="callNo" :label-width="formLabelWidth">
                <el-input @input="form.callNo = verifyfilter('char', form.callNo)" v-model="form.callNo"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="型深" :label-width="formLabelWidth">
                <el-input @input="form.mouldedDepth = verifyfilter('digit', form.mouldedDepth)"
                  v-model="form.mouldedDepth" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="总长" prop="shipLength" :label-width="formLabelWidth">
                <el-input v-model="form.shipLength" @input="form.shipLength = verifyfilter('digit', form.shipLength)"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="船宽" prop="shipWidth" :label-width="formLabelWidth">
                <el-input @input="form.shipWidth = verifyfilter('digit', form.shipWidth)" v-model="form.shipWidth"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="总吨" :label-width="formLabelWidth" prop="totalTon">
                <el-input @input="form.totalTon = verifyfilter('digit', form.totalTon)" v-model="form.totalTon"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="净吨" prop="netTon" :label-width="formLabelWidth">
                <el-input @input="form.netTon = verifyfilter('digit', form.netTon)" v-model="form.netTon"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="载重吨" prop="weightTon" :label-width="formLabelWidth">
                <el-input @input="form.weightTon = verifyfilter('digit', form.weightTon)" v-model="form.weightTon"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="舱口数" :label-width="formLabelWidth" prop="hatchNo">
                <el-input v-model="form.hatchNo" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input type="textarea" maxlength="500" show-word-limit
              @input="form.remark = verifyfilter('char', form.remark)" v-model="form.remark"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div class="demo-drawer__footer">
          <el-button size="small" type="primary" @click="addUpdate()" :loading="seaLoading">{{
              seaLoading ? "提交中 ..." : "保 存"
          }}</el-button>
        </div>
      </el-drawer>
    </div>
    <!-- 新增组件模块 -->
    <div class="leftbox">
      <el-drawer title="审核船舶信息" :visible.sync="drawerAudit" direction="rtl" size="55%">
        <el-form :rules="basisRules" ref="formRefs" size="small" :model="form" style="padding:20px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="中文船名" prop="shipName" :label-width="formLabelWidth">
                <el-input @input="form.shipName = verifyfilter('charSpace', form.shipName)" v-model="form.shipName"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="英文船名" prop="shipNameEn" :label-width="formLabelWidth">
                <el-input @input="form.shipNameEn = verifyfilter('latinSpace', form.shipNameEn)"
                  v-model="form.shipNameEn" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="船籍" prop="nationCode" :label-width="formLabelWidth"
                :rules="[{ required: true, message: '船籍不能为空' }]">
                <el-select clearable filterable style="width: 100%;" v-model="form.nationCode" placeholder="请选择"
                  @change="nationNameFun">
                  <el-option v-for="item in nationData" :key="item.dictValue" :label="item.dictLabel"
                    :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="船舶类型" prop="shipTypeCode" :label-width="formLabelWidth">
                <el-select clearable v-model="form.shipTypeCode" placeholder="船舶类型" style="width: 100%"
                  @change="changeDead">
                  <el-option v-for="item in boatData" :key="item.dictValue" :label="item.dictLabel"
                    :value="item.dictValue"></el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="IMO" prop="imo" :label-width="formLabelWidth">
                <el-input @input="form.imo = verifyfilter('char', form.imo)" v-model="form.imo" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="MMSI" prop="mmsi" :label-width="formLabelWidth">
                <el-input @input="form.mmsi = verifyfilter('char', form.mmsi)" v-model="form.mmsi"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="总长" prop="shipLength" :label-width="formLabelWidth">
                <el-input v-model="form.shipLength" @input="form.shipLength = verifyfilter('digit', form.shipLength)"
                  autocomplete="off"></el-input>
              </el-form-item>

            </el-col>
            <el-col :span="12">
              <el-form-item label="船宽" prop="shipWidth" :label-width="formLabelWidth">
                <el-input @input="form.shipWidth = verifyfilter('digit', form.shipWidth)" v-model="form.shipWidth"
                  autocomplete="off"></el-input>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="总吨" :label-width="formLabelWidth" prop="totalTon">
                <!-- <el-input @input="form.totalTon = verifyfilter('digit', form.totalTon)" v-model="form.totalTon" @change="calcTonClick(form.totalTon)" autocomplete="off"></el-input> -->
                <el-input @input="form.totalTon = verifyfilter('digit', form.totalTon)" v-model="form.totalTon"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="净吨" prop="netTon" :label-width="formLabelWidth">
                <!-- <el-input @input="form.netTon = verifyfilter('digit', form.netTon)" v-model="form.netTon" autocomplete="off" @change="changeNetTon(form.netTon)"></el-input> -->
                <el-input @input="form.netTon = verifyfilter('digit', form.netTon)" v-model="form.netTon"
                  autocomplete="off"></el-input>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="型深" :label-width="formLabelWidth">
                <el-input @input="form.mouldedDepth = verifyfilter('digit', form.mouldedDepth)"
                  v-model="form.mouldedDepth" autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="呼号" prop="callNo" :label-width="formLabelWidth">
                <el-input @input="form.callNo = verifyfilter('char', form.callNo)" v-model="form.callNo"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="载重吨" prop="weightTon" :label-width="formLabelWidth">
                <el-input @input="form.weightTon = verifyfilter('digit', form.weightTon)" v-model="form.weightTon"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="舱口数" :label-width="formLabelWidth" prop="hatchNo">
                <el-input v-model="form.hatchNo"
                  autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input type="textarea" maxlength="500" show-word-limit
              @input="form.remark = verifyfilter('char', form.remark)" v-model="form.remark"
              autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <div class="demo-drawer__footer" v-if="showDoubleFlag">
          <el-button size="small" type="primary" :disabled="form.status == '0' ? false : true" @click="handlePass()">审核</el-button>
          <!-- <el-button size="small" type="danger" :disabled="form.status == '0' ? false : true" @click="handleNoPass()">不
            通 过</el-button> -->
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { isObjectValueEqual } from '@/libs/date';
import BaseTable from '@/components/BaseTable';
import headerSearch from './component/headerSearch';
import api from '@/api/Basic/portInfo'
import publicapi from '@/api/public'
export default {
  name: 'metadataSeagoingvessel',
  components: {
    BaseTable,
    headerSearch
  },
  data() {
    // 检验中文+英文是否唯一
    const CnEnCheck = (rule, value, callback) => {
      // 中英文其中一个为空,校验通过
      if (!this.form.shipName || !this.form.nameEn) {
        callback();
      } else {
        const idObj = this.form.id ? { id: this.form.id } : {};
        const params = {
          ...idObj,
          nameCn: this.form.shipName,
          nameEn: this.form.nameEn
        };
        this.$http
          .get(`/${this.$ServiceName}/api/external/mtship/${this.$version}/checknamecnandnameen`, { params: params })
          .then((res) => {
            if (res.data.success) {
              if (!res.data.data) {
                // 返回false时通过
                callback();
              } else {
                callback('此船舶中文名+英文名已存在,请核对');
              }
            } else {
              callback('检验不通过');
            }
          });
      }
    };
    return {
      menuFlag: false,
      menuArr: [],
      seaLoading: false,
      nationData: [], // 船籍
      // 搜索框显示对象
      selectObject: [
        {
          name: '中文船名',
          type: 'inputVerify',
          verifyTpye: 'char',
          modelName: 'shipName'
        },
        {
          name: '呼号',
          type: 'inputVerify',
          modelName: 'callNo',
          verifyTpye: 'char'
        },
        {
          name: 'IMO',
          type: 'inputVerify',
          modelName: 'imo',
          verifyTpye: 'char'
        }
      ],
      loading: false,
      cargotableData: [],
      cargotableDataColumns: [
        {
          prop: 'shipName',
          label: '中文船名'
        },
        {
          prop: 'shipNameEn',
          label: '英文船名'
        },
        {
          prop: 'nationName',
          label: '船籍'
        },
        {
          prop: 'imo',
          label: 'IMO'
        },
        {
          prop: 'callNo',
          label: '呼号'
        },
        {
          prop: 'shipLength',
          label: '总长'
        },
        {
          prop: 'shipWidth',
          label: '船宽'
        },
        {
          prop: 'totalTon',
          label: '船舶总吨'
        },
        {
          prop: 'netTon',
          label: '船舶净吨'
        },
        {
          prop: 'weightTon',
          label: '载重吨'
        },
        {
          prop: 'status',
          label: '审核状态',
          render(h, params) {
            if (params.row.status == '1') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已审核'
                }
              })
            } else if (params.row.status == '10') {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '草稿'
                }
              })
            } else if (params.row.status == '9') {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'danger'
                },
                domProps: {
                  innerHTML: '审核未通过'
                }
              })
            } else {
              return h('el-tag', {
                props: {
                  size: 'mini'
                } ,
                domProps: {
                  innerHTML: '未审核',
                  type: 'warning'
                }
              })
            }
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 270,
          render: (h, params) => {
            return h(
              'div',
              {
                class: 'btnClass'
              },
              [
                h('el-button', {
                  props: {
                    size: 'mini'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML: `<span style='color:#0B6CD6;display: ${this.menuArr.includes('船舶修改') ? 'block' : 'none'
                    }'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleEdit(params.$index, params.row);
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini',
                    disabled: params.row.status == '1' ? true : false
                  },
                  style: {
                    marginRight: '10px'
                  },
                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    innerHTML:
                      "<span style='color:#EFAE12;'><i class='iconfont icon-1-011'></i><span  style='padding-left:5px;'>审核</span></span>"
                  },
                  on: {
                    click: () => {
                      this.handleAudit(params.row);
                    }
                  }
                }),
                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E;display: ${this.menuArr.includes('船舶删除') ? 'block' : 'none'}'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete('1', params.row.id)
                    }
                  }
                })
              ]
            );
          }
        }
      ],
      // 基础信息验证
      basisRules: {
        shipName: [
          {
            required: true,
            message: '中文船名不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 1 到 50 个字符',
            trigger: 'change'
          },
          {
            validator: CnEnCheck,
            trigger: 'blur'
          }
        ],
        shipNameEn: [
          {
            required: true,
            message: '英文船名不能为空',
            trigger: 'blur'
          }

        ],
        shipLength: [
          {
            required: true,
            message: '船长不能为空',
            trigger: 'blur'
          }

        ],
        shipWidth: [
          {
            required: true,
            message: '船宽不能为空',
            trigger: 'blur'
          }

        ],
        shipTypeCode: [
          {
            required: true,
            message: '船舶类型不能为空',
            trigger: 'blur'
          }
        ],
        totalTon: [
          {
            required: true,
            message: '总吨不能为空',
            trigger: 'blur'
          }

        ],
        netTon: [
          {
            required: true,
            message: '净吨不能为空',
            trigger: 'blur'
          }

        ],
        weightTon: [
          {
            required: true,
            message: '载重吨不能为空',
            trigger: 'blur'
          }

        ],
        nationCode: [{
          required: true,
          message: '船籍不能为空',
          trigger: 'blur'
        }],
        hatchNo: [
          {
            required: true,
            message: '舱口数不能为空',
            trigger: 'blur'
          },
          { max: 2, message: '舱口数最多两位数', trigger: 'blur' }

        ]

      },
      queryInfo: {
        nameCn: '',
        shortCode: '',
        shipKindCode: '',
        callNo: '',
        imoNo: ''
      }, // 查询参数
      flag: false,
      flagHint: false,
      visible: true,
      popVal: '',
      form: {
        id: '',
        shipName: '',
        shipNameEn: '',
        nationCode: '',
        nationName: '',
        shipTypeCode: '',
        shipTypeName: '',
        shipLength: '',
        shipWidth: '',
        mouldedDepth: '',
        totalTon: '',
        netTon: '',
        weightTon: '',
        hatchNo: '',
        callNo: '',
        imo: '',
        mmsi: '',
        remark: '',
        status: '0',
        delFlag: '0'

      },
      formLabelWidth: '90px', // form的item宽度
      drawer: false, // 新增修改
      boatcompData: [], // 船公司
      boatMianData: [], // 船主
      // 分页
      startpage: 1,
      totalNum: 0,
      pagesize: 10,
      currentPage: 1, // 当前页
      // dicttype: 'ship_type',
      boatData: [], // 船类型
      boatKind: [], // 船型
      aciveName: 'first',
      coverTypeList: [], // 舱口盖类型列表
      isshipTypeCode: false,
      drawerAudit: false,
      showDoubleFlag: false
    };
  },
  watch: {
    form: {
      handler(newVal, oldVal) {
        this.flagHint = isObjectValueEqual(newVal, oldVal);
      },
      deep: true
    }
  },
  async activated() {
    var menuArr = [];
    var menuId = '';
    if (localStorage.getItem('menuArr')) {
      menuArr = JSON.parse(localStorage.getItem('menuArr'));
    }
    menuArr.map((item) => {
      item.children.map((v) => {
        if (window.location.href.includes(v.url)) {
          menuId = v.id;
        }
      });
    });

    if (menuId) {
      this.menuArr = [];
      await this.$http
        .get(`/${this.$ServiceName}/api/external/sysmenubtn/listresourcebtnbyid?menuId=${menuId}`, { timeout: 30000 })
        .then((res) => {
          res.data.data.map((item) => {
            this.menuArr.push(item.RESOURCENAME);
          });

          if (!this.menuArr.includes('船舶新增')) {
            this.menuFlag = false;
          } else {
            this.menuFlag = true;
          }
        })
        .catch((error) => { });
    }
    if (this.$store.state.app.searchResouce == 'menu') {
      this.queryInfo = {
        nameCn: '',
        shortCode: '',
        shipKindCode: '',
        callNo: '',
        imoNo: ''
      };
      this.getNationData()
      this.getShipTypeData()
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight;
    }
  },
  methods: {
    /**
     * @Author: zhangyongbing
     * @description: 双击查看详情
     * @param {*} row
     * @return {*}
     */
    doubleClick(row) {
      this.drawerAudit = true;
      this.showDoubleFlag = false;
      this.form = row;
    },
    // 获取国籍
    async getNationData() {
      await publicapi.getDictData('NATIONALITY').then(res=>{
        this.nationData = res.data.data.NATIONALITY
      })

    },
    nationNameFun(val) {
      if(val){
        this.form.nationName = this.nationData.filter(item => item.dictValue == val)[0].dictLabel
      }
    },
    // 获取船舶类型
    async getShipTypeData() {
      await publicapi.getDictData('SHIPTYPE').then(res=>{
        this.boatData = res.data.data.SHIPTYPE
      })
    },
    // 通过
    async handlePass() {
      // delete this.form.shipTypeName;
      // delete this.form.shipKindName;
      // delete this.form.hatchType;
      // delete this.form.updateTime;
      // delete this.form.createTime;
      // delete this.form.maShipid;
      // delete this.form.index;
      this.form.status = '1';
      this.form.buildDate = this.getEditPickDate(this.form.buildDate);
      await this.$http
        .put(`/${this.$ServiceName}/api/external/mtship/checkregister`, this.form)
        .then((res) => {
          this.$message.success('审核成功');
          this.getListData();
          this.drawerAudit = false;
        })
        .catch((error) => { });
    },
    async handleNoPass() {
      // delete this.form.shipTypeName;
      // delete this.form.shipKindName;
      // delete this.form.hatchType;
      // delete this.form.updateTime;
      // delete this.form.createTime;
      // delete this.form.maShipid;
      // delete this.form.index;

      this.form.status = '0';
      this.form.buildDate = this.getEditPickDate(this.form.buildDate);
      await this.$http
        .put(`/${this.$ServiceName}/api/external/mtship/checkregister`, this.form)
        .then((res) => {
          this.$message.success(res.data.msg);
          this.getListData();
          this.drawerAudit = false;
        })
        .catch((error) => { });
    },
    // 更换时间格式
    getEditPickDate(date) {
      let newDate = null;
      if (date) {
        newDate = new Date(date);
      } else {
        newDate = new Date();
      }
      const time =
        newDate.getFullYear() +
        '-' +
        (newDate.getMonth() + 1 + '').padStart(2, '0') +
        '-' +
        (newDate.getDate() + '').padStart(2, '0') +
        'T' +
        (newDate.getHours() + '').padStart(2, '0') +
        ':' +
        (newDate.getMinutes() + '').padStart(2, '0') +
        ':' +
        (newDate.getSeconds() + '').padStart(2, '0') +
        '.000Z';
      return time;
    },
    // 审核事件
    handleAudit(row) {
      if (row.status != '0') {
        return;
      }
      this.drawerAudit = true;
      this.showDoubleFlag = true;
      this.form = row;
    },
    changeDead(val) {
      if (val) {
        this.form.shipTypeName = this.boatData.filter(item => item.dictValue == val)[0].dictLabel
      }
    },
    changeDeadWeight(val) {
      const total = this.form.totalTon;
      const netTon = this.form.netTon;
      if (total) {
        const flag = val <= total - netTon;
        if (!flag) {
          this.form.deadWeight = '';
          return this.$message.warning('自重和净重不可以大于总吨');
        }
      }
    },
    changeNetTon(val) {
      const total = this.form.totalTon;
      const deadWeight = this.form.deadWeight;
      if (total) {
        const flag = val <= total - deadWeight;
        if (!flag) {
          this.form.netTon = '';
          return this.$message.warning('自重和净重不可以大于总吨');
        }
      }
    },
    calcTonClick(val) {
      const deadWeight = this.form.deadWeight;
      const netTon = this.form.netTon;
      const total = deadWeight + netTon;

      if (total > val) {
        this.form.deadWeight = '';
        this.form.netTon = '';
        return this.$message.warning('自重和净重不可以大于总吨');
      }
    },
    handleTabsClick() { },
    // 生成速记码
    async sjmCreated(val) {
      const res = await this.$http.get(`/${this.$ServiceName}/api/external/public/autorefer?name=${val}`);
      this.form.shortCode = res.data.data;
    },
    // 获取国籍
    // async getNationData() {
    //   const res = await this.$http.get(
    //     `/${this.$ServiceName}/api/external/public/listdict?dicttype=NATION`
    //   )
    //   this.nationData = res.data.data
    // },
    // 搜索
    searchClick(searchData) {
      this.startpage = 1;
      this.queryInfo = Object.assign(this.queryInfo, searchData);
      this.getListData();
    },
    // 查询数据table
    async getListData() {
      this.loading = true;
      await this.$http
        .get(`/${this.$ServiceName}/api/external/mtship/queryall?pagesize=${this.pagesize}&startpage=${this.startpage}`, {
          params: this.queryInfo
        })
        .then((res) => {
          this.cargotableData = res.data.data.pages;
          // 分页
          this.startpage = res.data.data.pageNum;
          this.pagesize = res.data.data.pageSize;
          this.totalNum = res.data.data.totalNum;

          // this.cargotableData.map(n => {
          //   const buildDate = new Date(n.buildDate)
          //   const year = buildDate.getFullYear()
          //   let month = buildDate.getMonth() + 1
          //   if (month >= 1 && month <= 9) {
          //     month = '0' + month
          //   }
          //   n.buildDate = year + '-' + month
          // })
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    // setType(type) {
    // 	if (type == "nameCn") return "中文船名";
    // 	if (type == "nameEn") return "英文船名";
    // 	if (type == "imoNo") return "imoNo";
    // 	if (type == "mmsi") return "mmsi";
    // 	if (type == "callNo") return "呼号";
    // },
    addUpdate() {
      this.savemethods();
      //    if(this.form.nameCn&&this.form.nameEn&&this.form.imoNo&&this.form.mmsi&&this.form.callNo) {
      //      let url = `/${this.$ServiceName}/api/external/mtship/${this.$version}/shipcheck?nameCn=${this.form.nameCn}&nameEn=${this.form.nameEn}&imoNo=${this.form.imoNo}&mmsi=${this.form.mmsi}&callNo=${this.form.callNo}&id=`
      //      if (!this.flag) {
      //        url = `/${this.$ServiceName}/api/external/mtship/${this.$version}/shipcheck?nameCn=${this.form.nameCn}&nameEn=${this.form.nameEn}&imoNo=${this.form.imoNo}&mmsi=${this.form.mmsi}&callNo=${this.form.callNo}&id=${this.form.id}`
      //      }
      //      this.$http.get(url).then(res => {
      //        if (res.data.data.length==0) {
      //          let urlb = `/${this.$ServiceName}/api/external/mtship/${this.$version}/checknamecn?nameCn=${this.form.nameCn}&id=`
      //          if (!this.flag) {
      //            urlb = `/${this.$ServiceName}/api/external/mtship/${this.$version}/checknamecn?nameCn=${this.form.nameCn}&id=${this.form.id}`
      //          }
      //          this.$http.get(urlb).then(v => {
      //            if (v.data.data) {
      //              var arr = []
      //              v.data.data.map(item => {
      //                arr.push(item.nameCn)
      //              })
      //              this.popVal = arr
      //            } else {
      //              this.popVal = ""

      //            }
      //            if (this.popVal) {
      //              this.$confirm(`存在类似中文船名${this.popVal}是否继续保存?`, '提示', {
      //                confirmButtonText: '确定',
      //                cancelButtonText: '取消',
      //                type: 'warning'
      //              }).then(() => {
      //                this.savemethods()
      //                this.popVal = ""
      //              }).catch(() => {
      //              });
      //            } else {
      //              this.savemethods()
      //              this.popVal = ""
      //            }
      //          })
      //        }else{
      //          var str = ""
      //          res.data.data.map((item,index)=>{
      //            if(res.data.data.length-1 == index){
      //              str += this.setType(item.type)

      //            }else{
      //              str += this.setType(item.type)+"、"

      //            }
      //          })
      //          this.$message.error(`此 ${str} 存在重复`)

      //        }
      //      })

      //    }else{
      //        this.savemethods()
      //        this.popVal = ""

      //      }
    },
    async savemethods() {
      // 传递的参数等待确认
      // delete this.form.createBy;
      // delete this.form.createName;
      // delete this.form.createTime;
      // delete this.form.updateBy;
      // delete this.form.updateName;
      // delete this.form.updateTime;
      // delete this.form.delFlag;
      // delete this.form.shipKindName;
      // delete this.form.shipTypeName;
      // delete this.form.shipNationName;
      // delete this.form.index;
      // delete this.form.siloCoverName;

      // if (this.form.shipCompanyCode) {
      // 	this.boatcompData.forEach((v) => {
      // 		if (this.form.shipCompanyCode == v.id) {
      // 			this.form.shipCompany = v.fullName;
      // 		}
      // 	});
      // } else {
      // 	this.form.shipCompany = "";
      // }
      // if (this.form.shipOwnerCode) {
      // 	this.boatMianData.forEach((v) => {
      // 		if (this.form.shipOwnerCode == v.id) {
      // 			this.form.shipOwner = v.fullName;
      // 		}
      // 	});
      // } else {
      // 	this.form.shipOwner = "";
      // }

      // if (this.form.buildDate) {
      // 	this.form.buildDate = new Date(this.form.buildDate);
      // }

      // this.form.buildDate = new Date(this.form.buildDate)
      // flag为真进行添加操作
      this.$refs.formRefs.validate(async(valid) => {
        if (valid) {
          // 船舶自重 总吨 净吨  保存时再进行判断
          // let deadWeight = this.form.deadWeight
          // let netTon = this.form.netTon
          // let sumTon = Number(deadWeight) + Number(netTon)
          // let totalTon = this.form.totalTon
          // if(Number(sumTon) > Number(totalTon)){
          //     this.form.deadWeight = ''
          //     this.form.netTon = ''
          //     return this.$message.warning('船舶自重和净吨不可以大于总吨')
          // }
          this.seaLoading = true;
          if (this.flag) {
            delete this.form.id;
            await this.$http
              .post(`/${this.$ServiceName}/api/external/mtship/add`, this.form)
              .then((res) => {
                this.seaLoading = false;
                this.$message.success(res.data.msg);
                this.getListData();
                this.drawer = false;
              })
              .catch((error) => {
                this.seaLoading = false;
              });
          } else {
            if (this.form.buildDate) {
              this.form.buildDate = new Date(this.form.buildDate);
            }

            // 进行修改操作elseRules
            await this.$http
              .put(`/${this.$ServiceName}/api/external/mtship/updatebyid`, this.form)
              .then((res) => {
                this.seaLoading = false;
                this.$message.success(res.data.msg);
                this.drawer = false;
                this.getListData();
              })
              .catch((error) => {
                this.seaLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    // 修改
    handleEdit(index, row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.form.hatchNo = String(row.hatchNo)
      // if(row.shipKindName == '散货船'){
      //   this.$set(this.basisRules,'shipTypeCode',[
      //     {required: true,message: '干货船、散货船等不能为空',trigger: 'change'}
      //   ])
      // }else {
      //   this.$set(this.basisRules,'shipTypeCode',[
      //     {required: false,message: '干货船、散货船等不能为空',trigger: 'change'}
      //   ])
      // }

      this.seaLoading = false;
      this.drawer = true;
      this.flag = false;
      this.aciveName = 'first';
    },

    add() {
      this.flag = true;
      this.drawer = true;
      this.aciveName = 'first';
      this.seaLoading = false;
      this.$nextTick(() => {
        this.form = {
          id: '',
          shipName: '',
          shipNameEn: '',
          nationCode: '',
          nationName: '',
          shipTypeCode: '',
          shipTypeName: '',
          shipLength: '',
          shipWidth: '',
          mouldedDepth: '',
          totalTon: '',
          netTon: '',
          weightTon: '',
          hatchNo: '',
          callNo: '',
          imo: '',
          mmsi: '',
          remark: '',
          status: '0',
          delFlag: '0'
        };
        this.$refs.formRefs.resetFields();
      });
    },
    // 每页显示的条数
    handleSizeChange(val) {
      this.pagesize = val;
      this.getListData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.startpage = val;
      this.getListData();
    },
    handleClose(done) {
      if (this.flagHint) {
        this.$confirm('您已修改了数据，确定是否关闭？')
          .then((_) => {
            this.popVal = '';
            done();
            // this.$refs['formRefs'].clearValidate()
          })
          .catch((_) => { });
      } else {
        this.popVal = '';
        done();
      }
    },
    // 删除提示
    async handleDelete(flag, id) {
      const confirmRes = await this.$confirm(
        '此操作将永久删除该数据, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => {})
      if (confirmRes !== 'confirm') {
        return this.$message.info('已经取消删除')
      }
      this.subDelete(id)
    },
    // 删除
    async subDelete(id) {
      const res = await this.$http.delete(
        `/${this.$ServiceName}/api/external/mtship/deletebyid?id=${id}`
      )
      if (res.data.code != '0000') {
        return this.$message.error(res.data.msg)
      }
      this.$message.success(res.data.msg)
      this.getListData()
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-tabs__nav-scroll {
  margin: 0 20px;
}

/deep/ .el-table .el-button--mini {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 85px;
}

/deep/ .el-button--primary {
  background-color: #338ce8;
  border-color: #338ce8;
}

.page {
  background: #ffffff;
  border-radius: 4px 4px 0 0;
  padding-right: 20px;
}

.headerspan {
  background: #ffffff;
  border-bottom: 1px solid #e1e4eb;
  line-height: 40px;
  padding-left: 1rem;
}

.headerspan-item {
  line-height: 40px;
  padding-left: 1rem;
  font-size: 14px;
  color: #606266;
  letter-spacing: 0;
}

.box {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 4px 4px 0 0;
  border-top: none;
}

.title {
  background: #f5f7fa;
  height: 40px;
  line-height: 40px;

  p {
    font-family: MicrosoftYaHei;
    font-size: 16px;
    color: #303133;
    letter-spacing: 0;
    line-height: 16px;
    padding-left: 14px;
    line-height: 40px;
  }
}

/deep/ .el-drawer__header {
  margin-bottom: 0;
  padding: 16px;
  border-bottom: 1px solid gainsboro;
}

/deep/ .demo-drawer__footer {
  text-align: right;
  padding-right: 1rem;
  border-top: 1px solid #c8cfde;
  background-color: #f5f7fa;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  line-height: 50px;
}

/deep/ .el-table .cell {
  white-space: nowrap;
}

/deep/ .el-select:hover .el-input__inner {
  color: #909399;
}

/deep/ .el-form-item--mini .el-form-item__label {
  line-height: 0;
}

/deep/ .el-pagination {
  text-align: right;
  padding: 10px 5px;
}

/deep/ .el-table th>.cell {
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #606266;
}

/deep/ .el-table .el-button:focus,
.el-table .el-button:hover {
  background-color: #fff;
  border: 1px solid #e1e4eb;
}

/deep/ .el-table .el-button--mini {
  color: #1684f6;
  border-color: transparent;
  background: transparent;
}

/deep/ .el-table th {
  border-left: 1px solid #ebeef5;
}

/deep/ .el-table th:nth-child(1) {
  border-left: none;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #f5f7fa;
}

/deep/.el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-radius: 3px;
  border-radius: 3px;
}

/deep/ .el-button+.el-button {
  margin-left: 3px;
}

/deep/ .el-drawer__open .el-drawer.rtl {
  background: #f5f7fa;
}

.selectBox {
  background: #ffffff;
  border: 1px solid #e1e4eb;
  border-bottom: 0;
  border-left: none;
  height: 50px;
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 16px;
}

.kehuguanxi /deep/ .el-drawer__open .el-drawer.rtl {
  width: 30% !important;
}

/deep/ .el-drawer__body {
  overflow-y: auto;
  padding-bottom: 50px;
}

.btn /deep/ .el-button--mini,
.el-button--mini.is-round {
  padding: 7px;
}

.formt-itm {
  border-bottom: 1px solid gainsboro;
  margin-bottom: 4px;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
  justify-content: space-between;
  letter-spacing: 0;
  font-family: MicrosoftYaHei;
  font-size: 14px;
  color: #303133;
  line-height: 40px;

  i {
    color: #909399;
  }
}
</style>
